<template>
	<view class="a_mask show1">


		<form class="a_box" @submit="formSubmit" @reset="formReset">
			<view class="a_head">工序汇报</view>
			<view class="a_input">

				<view class="hbTitles">汇报日期 : {{dayDate}}</view>

				<view class="Items">
					<text class="titles">合格数量</text>
					<view class="inputDiv">
						<input class="inputClass" type="number" v-model="hgNum" />
					</view>
				</view>

				<view class="Items">
					<text class="titles">返工数量</text>
					<view class="inputDiv">
						<input class="inputClass" type="number" v-model="fgNum" />
					</view>
				</view>

				<view class="Items">
					<text class="titles">报废数量</text>
					<view class="inputDiv">
						<input class="inputClass" type="number" v-model="bfNum" />
					</view>
				</view>

				<!--判断展示时间-->
				<template > <!-- v-if="gxDetails.wagesType==2"-->
					<view class="Items">
						<text class="titles">开工时间</text>
						<view class="inputDiv" @tap="showpickerChage(2)">
							<input :disabled="true" class="inputClass" v-model="starTime" />
						</view>
					</view>
					<view class="Items">
						<text class="titles">结束时间</text>
						<view class="inputDiv" @tap="showpickerChage(3)">
							<input :disabled="true" class="inputClass" v-model="endTime" />
						</view>
					</view>
				</template>

				<view class="Items" style="height:160rpx;margin-top:30rpx;">
					<text class="titles_1">报废原因</text>
					<textarea class="bfTextDiv" v-model="bfText" placeholder="报废原因" />
				</view>
			</view>


			<view class="a_btn">
				<button form-type="reset" style="border-right:0.5rpx solid #C8C7CC;box-sizing: border-box;"
					:style="{color:cancelColor}">取消</button>
				<button form-type="submit" style="border-left:0.5rpx solid #C8C7CC;box-sizing: border-box;"
					:style="{color:confirmColor}">汇报</button>
			</view>
		</form>


		<!--遮罩层-->
		<view class="zzc" @tap="showPicker=false" :class="showPicker==false?'zzcHide':''"></view>
		<!--选择器-->
		<view class="showPickerDiv" :class="showPicker==true?'showSixH':''">
			<view class="myButtom">
				<text @tap="showPicker=false">取消</text>
				<text>请选择</text>
				<text @tap="yesTap">确认</text>
			</view>

			<picker-view class="sixDiv" v-if="showPicker" @change="pickerChange" :value="value">
				<picker-view-column>
					<view class="sixDivitem" v-for="(item,index) in years" :key="index">{{item}}年</view>
				</picker-view-column>
				<picker-view-column>
					<view class="sixDivitem" v-for="(item,index) in months" :key="index">{{item}}月</view>
				</picker-view-column>
				<picker-view-column>
					<view class="sixDivitem" v-for="(item,index) in days" :key="index">{{item}}日</view>
				</picker-view-column>
				<picker-view-column>
					<view class="sixDivitem" v-for="(item,index) in hours" :key="index">{{item}}时</view>
				</picker-view-column>
				<picker-view-column>
					<view class="sixDivitem" v-for="(item,index) in minutes" :key="index">{{item}}分</view>
				</picker-view-column>
			</picker-view>

		</view>

	</view>
</template>

<script>
	import {
		createCardDetail
	} from '@/common/api/table.js'
	export default {

		props: {
			cancelColor: {
				type: String,
				default: '#999999'
			},
			confirmColor: {
				type: String,
				default: '#333333'
			},
			cancelShow: {
				type: Boolean,
				default: false
			},
			gxDetails: {
				type: Object, //是否展示时间
				default: () => []
			}
		},
		data() {
			return {
				showPicker: false,
				years: [],
				year: '',
				months: [],
				month: '',
				days: [],
				day: '',
				hours: [],
				hour: '',
				minutes: [],
				minute: '',
				value: [],
				starTime: '',
				endTime: '',
				hgNum: '',
				fgNum: '',
				bfNum: '',
				dayDate: null,
				bfText: '',
				pickerIndex: 0,
				workHour: null, //工时
			};
		},

		watch: {
			cancelShow() {
				if (this.cancelShow == true) {
					//打开清空默认值
					this.hgNum = '';
					this.fgNum = '';
					this.bfNum = '';
					this.bfText = '';
					this.pickerIndex = 0;
					this.getDate();
				}
			}
		},

		methods: {

			//点击确定修改
			yesTap() {
				let time = this.year + '-' + (this.month < 10 ? `0${this.month}` : this.month) + '-' + (this.day < 10 ?
					`0${this.day}` : this.day) + ' ' + (this.hour < 10 ? `0${this.hour}` : this.hour) + ':' + (this
					.minute < 10 ? `0${this.minute}` : this.minute);
				if (this.pickerIndex == 2) {
					this.starTime = time;
				} else if (this.pickerIndex == 3) {
					this.endTime = time;
				}
				this.showPicker = !this.showPicker;
			},

			pickerChange(e) {
				const date = new Date();
				//生日选择器时，切换年份月份时，动态更改当月天数
				let val = e.detail.value;
				this.year = this.years[val[0]];
				this.month = this.months[val[1]];
				this.day = this.days[val[2]];
				this.hour = this.hours[val[3]];
				this.minute = this.minutes[val[4]];
				var newDate = new Date(this.year, this.month - 1, 32);

				var day = 32 - newDate.getDate(); //当月天数
				this.days = [];
				//
				for (let i = 1; i <= date.getDate(); i++) {
					this.days.push(i)
				}
			},

			showpickerChage(index) {
				this.pickerIndex = index;
				this.getTime(); //获取现在的时间
				this.showPicker = true;
			},

			getTime() {
				const date = new Date()
				const years = []
				const year = date.getFullYear()
				const months = []
				const month = date.getMonth() + 1
				const days = []
				const day = date.getDate()
				const hours = []
				const hour = date.getHours()
				const minutes = []
				const minute = date.getMinutes()
				for (let i = 1990; i <= date.getFullYear(); i++) {
					years.push(i)
				}
				for (let i = 1; i <= date.getMonth() + 1; i++) {
					months.push(i)
				}

				const newDate = new Date(year, month - 1, 32); // 根据月份设置日期
				const timeDay = 32 - newDate.getDate(); // 根据设置的日期来获取当前月份的天数。

				for (let i = 1; i <= date.getDate(); i++) {
					days.push(i)
				}
				for (let i = 0; i <= date.getHours(); i++) {
					hours.push(i)
				}
				for (let i = 0; i <= date.getMinutes(); i++) {
					minutes.push(i)
				}
				this.years = years;
				this.months = months;
				this.days = days;
				this.hours = hours;
				this.minutes = minutes;
				this.year = year;
				this.month = month;
				this.day = day;
				this.hour = hour;
				this.minute = minute;
				this.value = [9999, month - 1, day - 1, hour, minute];
			},



			getDate() {
				var nowDate = new Date();
				var year = nowDate.getFullYear();
				var month = nowDate.getMonth() + 1 < 10 ? "0" + (nowDate.getMonth() + 1) :
					nowDate.getMonth() + 1;
				var day = nowDate.getDate() < 10 ? "0" + nowDate.getDate() : nowDate.getDate();
				this.dayDate = year + "-" + month + "-" + day;
			},
			formSubmit(e) {
				
				let retNum = /^\d*$/; //匹配数字
				if (!this.hgNum) {
					uni.showToast({
						title: '请输入合格数量',
						icon: 'none'
					});
					return;
				} else {
					if (!retNum.test(this.hgNum)) {
						uni.showToast({
							title: '请输入有效的合格数量',
							icon: 'none'
						});
						return;
					}
				}
				if (!this.fgNum) {
					uni.showToast({
						title: '请输入返工数量',
						icon: 'none'
					});
					return;
				} else {
					if (!retNum.test(this.fgNum)) {
						uni.showToast({
							title: '请输入有效的返工数量',
							icon: 'none'
						});
						return;
					}
				}
				if (!this.bfNum) {
					uni.showToast({
						title: '请输入报废数量',
						icon: 'none'
					});
					return;
				} else {
					if (!retNum.test(this.bfNum)) {
						uni.showToast({
							title: '请输入有效的报废数量',
							icon: 'none'
						});
						return;
					}
				}

				//为2时需校验时间,计算工时
				if (this.wagesType == 2) {
					if (!this.starTime) {
						uni.showToast({
							title: '请选择开工时间',
							icon: 'none'
						});
						return;
					}
					if (!this.endTime) {
						uni.showToast({
							title: '请选择结束时间',
							icon: 'none'
						});
						return;
					}
					
					//判断开始时间不能大于结束时间
					let sTime = this.starTime + ':00';
					let eTime = this.endTime + ':00';
					var s_tmp = new Date(sTime).getTime();
					var e_tmp = new Date(eTime).getTime();
					if(e_tmp>s_tmp){
						// console.log('正常')
					}else{
						// console.log('不正常')
						uni.showToast({
							title: '开始时间不能大于结束时间',
							icon: 'none'
						});
						return;
					}
					
					
					let sIndex  =this.starTime.indexOf(' ');
					let eIndex  =this.endTime.indexOf(' ');
					let sStr = this.starTime.substring(sIndex+1);
					let eStr = this.endTime.substring(sIndex+1);
					let arr1 = sStr.split(":");
					let time1 = Number(arr1[0]) * 60 + Number(arr1[1]);
					let arr2 = eStr.split(":");
					let time2 = Number(arr2[0]) * 60 + Number(arr2[1]);
					let minutes = time2 - time1;
					let h = Math.floor(minutes / 60);
					let m = minutes % 60;
					let h1 = m / 60;
					this.hbSource1.jgTime = Math.floor(minutes / 60) + "时" + (minutes % 60) + "分"
					this.hbSource1.newjgtime = h + h1;
				}

				this.gxDetails.unqualifiedReason = this.bfText;
				this.gxDetails.qualifiedQuantity = Number(this.hgNum);
				this.gxDetails.unqualifiedQuantity = Number(this.bfNum);
				this.gxDetails.reworkQuantity = Number(this.fgNum);
				this.gxDetails.workBeginTime = this.starTime;
				this.gxDetails.workEndTime = this.endTime;
				this.gxDetails.workHour = this.workHour;
				//请求
				createCardDetail()
					.then(res => {

					})

				let obj = {
					fgNum: Number(this.fgNum),
					bfNum: Number(this.bfNum),
					hgNum: Number(this.hgNum),
					bfText: this.bfText,
					starTime: this.starTime,
					endTime: this.endTime,
				};
				this.$emit('confirm', obj)
			},
			formReset(e) {
				this.$emit('cancel')
			}
		}
	}
</script>

<style lang="scss">
	.a_mask {
		position: fixed;
		z-index: 999;
		background-color: rgba(0, 0, 0, 0.5);
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;

		.a_box {
			width: 750rpx;
			overflow: hidden;
			background-color: #fff;
			border-radius: 10rpx;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);

			.a_head {
				text-align: center;
				font-size: 30rpx;
				line-height: 88rpx;
				font-weight: bold;
			}

			.a_input {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
			}

			.a_btn {
				border-top: 1rpx solid #C8C7CC;
				margin-top: 30rpx;
				text-align: center;
				font-size: 30rpx;
				display: flex;
				justify-content: space-between;

				button {
					width: 50%;
					height: 100rpx;
					line-height: 100rpx;
					background-color: #fff;
					font-size: 30rpx;
					border-radius: 0rpx;
					padding: 0;

					&::after {
						border: none
					}

					&:first-child {
						border-right: 1rpx solid #f5f5f5;
						color: #999999;
						box-sizing: border-box;
					}

					&:last-child {
						color: #333;
					}
				}

			}
		}
	}

	.Items {
		margin-top: 30rpx;
		width: 650rpx;
		height: 80rpx;
		display: flex;
		align-items: center;
		flex-direction: row;
		justify-content: center;

		.titles:before {
			content: '* ';
			color: red;
		}

		.titles {
			font-size: 30rpx;
			width: 150rpx;
			text-align: center;
		}

		.titles_1 {
			font-size: 30rpx;
			width: 150rpx;
			text-align: center;
		}

		.bfTextDiv {
			width: 500rpx;
			border: 1rpx solid #C8C7CC;
			border-radius: 10rpx;
			height: 160rpx;
			margin-left: 20rpx;
		}


		.inputDiv {
			width: 300rpx;
			height: 80rpx;
			margin-left: 20rpx;
			border: 2rpx solid #C0C0C0;
			border-radius: 15rpx;
			display: flex;
			align-items: center;

			.inputClass {
				width: 300rpx;
				height: 80rpx;
				text-align: center;
			}

		}
	}

	@keyframes show1 {
		0% {
			opacity: 0;
		}

		100% {
			opacity: 1;
		}
	}

	.show1 {
		animation: show1 0.4s ease-in;
	}

	.hbTitles {
		width: 100%;
		height: 50rpx;
		line-height: 50rpx;
		text-align: center;
	}

	.sixDivitem {
		text-align: center;
		line-height: 68rpx;
	}

	.zzc {
		width: 100%;
		height: 100%;
		display: block;
		background: rgba(0, 0, 0, 0.5);
		position: fixed;
		top: 0rpx;
		z-index: 20;
		transition: all 2s;
	}

	.zzcHide {
		display: none !important;
	}

	.sixDiv {
		width: 750rpx;
		height: 400rpx;
		background-color: #f8f8f8;
		text-align: center;
	}

	.myButtom {
		width: 750rpx;
		display: flex;
		justify-content: space-around;
		height: 100rpx;
		align-items: center;
	}

	.showSixH {
		height: 500rpx !important;
	}

	.showPickerDiv {
		position: fixed;
		bottom: 0rpx;
		height: 0rpx;
		transition: height 0.5s;
		background-color: white;
		z-index: 999;
	}
</style>
